<template>
  <div class="box" :style="'top: ' + windowY + 'px; left: ' + windowX + 'px; z-index:' + windowIndex" ref="box" @mousedown="handleMousedown" @mousemove="handleMousemove">
    <div
      class="content"
      ref="content"
      :style="'width: calc(100%);height: calc(100%);'"
    >
      <div class="title" @mousedown.stop="moveMousedown">
        <div class="text">{{title}}</div>
        <div class="right">
          <div class="btn" @click="small">
            <img src="./img/small.png" alt="">
          </div>
          <div class="btn" @click="bigScreen">
            <img v-show="isBig" src='./img/bigscreen.png' alt="">
            <img v-show="!isBig" src='./img/big.png' alt="">
          </div>
          <div class="btn" @click="close">
            <img src="./img/close.png" alt="">
          </div>
        </div>
      </div>
      <div class="main" v-html="html" @mousedown.stop="zIndex"></div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    title: {
      default: '窗口'
    },
    windowX: {
      default: null,
    },
    windowY: {
      default: null,
    },
    html: {
      default: `<div></div>`
    },
    id: {
      default: null,
    }
  },
  data () {
    return {
      isBig: false,
      isSmall: false,
      minW: 200,
      minH: 100,
      offset: 2, //拖动变化大小的有效宽度
      x: 0,
      y: 0,
      w: 0,
      h: 0,
      clientX: 0,
      clientY: 0,
      isOf: '',
      isMousedown: false,
      initW: 0,
      initH: 0,
      initBigW: 0,
      initBigH: 0,
      initBigX: 0,
      initBigY: 0,
      windowIndex: 0,
    }
  },
  methods: {
    zIndex () {
      let index = window.sessionStorage.getItem("windowIndex") || 0;
      this.windowIndex = index++;
      window.sessionStorage.setItem("windowIndex", index++);
    },
    small () {
      this.isSmall = !this.isSmall;
      if (this.isSmall) {
        this.initW = this.$refs.box.offsetWidth;
        this.initH = this.$refs.box.offsetHeight;
        this.$refs.box.style.height = '35px';
        this.isBig = false;
      } else {
        this.$refs.box.style.width = this.initW + 'px';
        this.$refs.box.style.height = this.initH + 'px';
      }
    },
    close () {
      this.$destroy(true);
      this.$el.parentNode.removeChild(this.$el);
      this.$emit('close', this.id);
    },
    bigScreen () {
      this.isBig = !this.isBig;
      if (this.isBig) {
        if (this.isSmall) {
          this.initBigW = this.initW;
          this.initBigH = this.initH;
          this.isSmall = false;
        } else {
          this.initBigW = this.$refs.box.offsetWidth;
          this.initBigH = this.$refs.box.offsetHeight;
        }
        this.initBigX = this.$refs.box.offsetLeft;
        this.initBigY = this.$refs.box.offsetTop;

        this.$refs.box.style.width = document.body.offsetWidth + 'px';
        this.$refs.box.style.height = document.body.offsetHeight + 'px';
        this.$refs.box.style.top = 0;
        this.$refs.box.style.left = 0;
      } else {
        this.$refs.box.style.width = this.initBigW + 'px';
        this.$refs.box.style.height = this.initBigH + 'px';
        this.$refs.box.style.top = this.initBigY + 'px';
        this.$refs.box.style.left = this.initBigX + 'px';
      }
    },
    moveMousedown (e) {
      this.clientX = e.clientX;
      this.clientY = e.clientY;
      this.x = this.$refs.box.offsetLeft;
      this.y = this.$refs.box.offsetTop;
      window.onmousemove = this.moveBox;
      window.onmouseup = this.handleMouseup;
      this.zIndex();
      event.stopPropagation();
    },
    handleMouseup (e) {
      window.onmousemove = null;
      window.onmouseup = null;
      this.isOf = '';
      this.isMousedown = false;
    },
    moveBox (e) {
      let clientX = e.clientX;
      let clientY = e.clientY;
      let offsetX = clientX - this.clientX;
      let offsetY = clientY - this.clientY;
      this.$refs.box.style.top = this.y + offsetY + 'px';
      this.$refs.box .style.left = this.x + offsetX + 'px';
      this.checkBox('xy');
    },
    checkBox (type) {
      let top = this.$refs.box.offsetTop;
      let left = this.$refs.box.offsetLeft;
      let w = this.$refs.box.offsetWidth;
      let h = this.$refs.box.offsetHeight;

      let bodyW = document.body.offsetWidth;
      let bodyH = document.body.offsetHeight;

      if (type.indexOf('w') > -1) {
        if (w < this.minW) {
          w = this.minW;
        } else if (w > bodyW - left) {
          w = bodyW - left;
        }
      }
      
      if (type.indexOf('h') > -1){
        if (h < this.minH) {
          h = this.minH;
        } else if (h > bodyH - top) {
          h = bodyH - top;
        }
      }
      
      if (type.indexOf('y') > -1) {
        if (top < 0) {
          top = 0;
        } else if (top > bodyH - h) {
          top = bodyH - h;
        }
      }
      
      if (type.indexOf('x') > -1) {
        if (left < 0) {
          left = 0;
        } else if (left > bodyW - w) {
          left = bodyW - w;
        }
      }

      this.$refs.box.style.left = left + 'px';
      this.$refs.box.style.top = top + 'px';
      this.$refs.box.style.width = w + 'px';
      this.$refs.box.style.height = h + 'px';
    },
    handleMousedown (e) {
      if (e.target != this.$refs.box || this.isSmall) {
        return;
      }
      this.isMousedown = true;
      this.x = this.$refs.box.offsetLeft;
      this.y = this.$refs.box.offsetTop;
      this.w = this.$refs.box.offsetWidth;
      this.h = this.$refs.box.offsetHeight;
      this.clientX = e.clientX;
      this.clientY = e.clientY;
      window.onmousemove = this.mousemove;
      this.zIndex();
      window.onmouseup = this.handleMouseup;
    },
    mousemove (e) {
      let clientX = e.clientX;
      let clientY = e.clientY;

      let bodyH = document.body.offsetHeight;
      let bodyW = document.body.offsetWidth;

      if (clientX < 0) {
        clientX = 0;
      } else if (clientX > bodyW) {
        clientX = bodyW;
      }

      if (clientY < 0) {
        clientY = 0;
      } else if (clientY > bodyH) {
        clientY = bodyH;
      }

      let offsetX = clientX - this.clientX;
      let offsetY = clientY - this.clientY;

      let w = this.w + offsetX;
      let type = '';
      if (w < this.minW) {
        w = this.minW;
      }
      let h = this.h + offsetY;
      if (h < this.minH) {
        h = this.minH;
      }
      let ww = this.w - offsetX;
      let hh = this.h - offsetY;

      if (ww < this.minW) {
        ww = this.minW;
      }
      if (hh < this.minH) {
        hh = this.minH;
      }

      let x = this.x + offsetX;
      let y = this.y + offsetY;

      if (x < 0) {
        x = 0;
      }
      if (y < 0) {
        y = 0;
      }

      if (this.isOf == 'e') {
        this.$refs.box.style.width = w + 'px';
        type = 'w';
      } else if (this.isOf == 's') {
        this.$refs.box.style.height = h + 'px';
        type = 'h';
      } else if (this.isOf == 'se') {
        this.$refs.box.style.width = w + 'px';
        this.$refs.box.style.height = h + 'px';
        type = 'wh'
      } else if (this.isOf == 'n') {
        this.$refs.box.style.top = y + 'px';
        this.$refs.box.style.height = hh + 'px';
        type = 'yh';
      } else if (this.isOf == 'w') {
        this.$refs.box.style.left = x + 'px';
        this.$refs.box.style.width = ww + 'px';
        type = 'xw';
      } else if (this.isOf == 'nw') {
        this.$refs.box.style.left = x + 'px';
        this.$refs.box.style.width = ww + 'px';
        this.$refs.box.style.top = y + 'px';
        this.$refs.box.style.height = hh + 'px';
        type = 'xy'
      } else if (this.isOf == 'ne') {
        this.$refs.box.style.top = y + 'px';
        this.$refs.box.style.height = hh + 'px';
        this.$refs.box.style.width = w + 'px';
        type = 'ywh';
      } else if (this.isOf == 'sw') {
        this.$refs.box.style.left = x + 'px';
        this.$refs.box.style.width = ww + 'px';
        this.$refs.box.style.height = h + 'px';
        type = 'xwh';
      }
      this.checkBox(type);
    },
    handleMousemove (e) {
      if (e.target != this.$refs.box || this.isMousedown) {
        return;
      }
      let layerX = e.layerX;
      let layerY = e.layerY;
      let w = this.$refs.box.offsetWidth;
      let h = this.$refs.box.offsetHeight;
      let isTop = false, isRight = false, isLeft = false, isBottom = false;
      if (layerY < this.offset) {
        isTop = true;
      } else if (layerY > h - this.offset * 2) {
        isBottom = true;
      }
      if (layerX < this.offset) {
        isLeft = true;
      } else if (layerX > w - this.offset * 2) {
        isRight = true;
      }
      if (isTop) {
        if (isRight) {
          // 上右
          this.isOf = 'ne';
        } else if (isLeft) {
          // 上左
          this.isOf = 'nw';
        } else {
          // 上
          this.isOf = 'n';
        }
      } else if (isBottom) {
        if (isRight) {
          // 下右
          this.isOf = 'se';
        } else if (isLeft) {
          // 下左
          this.isOf = 'sw';
        } else {
          // 下
          this.isOf = 's';
        }
      } else if (isLeft) {
        // 左
        this.isOf = 'w';
      } else if (isRight) {
        // 右
        this.isOf = 'e';
      }
      this.$refs.box.style.cursor = this.isOf + '-resize';
    }
  },
  destroyed () {
    window.onmousemove = null;
    window.onmouseup = null;
  }
}
</script>
<style scoped>
.box{
  width: 500px;
  height: 300px;
  background: white;
  box-shadow:  0 2px 12px 0 rgba(0,0,0,.3);
  position: fixed;
  border-radius: 5px;
  border: 1px solid #ccc;
}
.content{
  cursor: default;
  border-radius: 5px;
  margin: 0;
  overflow: hidden;
}
.title{
  width: 100%;
  height: 30px;
  background: #f5f5f5;
  user-select: none;
  border-radius: 5px 5px 0 0 ;
  border-bottom: 1px solid #ccc;
  overflow: hidden;
  padding-left: 4px;
}
.main{
  width: 100%;
  height: calc(100% - 30px);
}
.right{
  float: right;
}
.btn{
  display: inline-block;
  width: 20px;
  margin-top: 7px;
  cursor: pointer;
}
.btn img {
  width: 13px;
}
.text{
  height: 100%;
  line-height: 30px;
  padding-left: 10px;
  display: inline-block;
}
</style>
